﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>摇一摇</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="css/shakecoupons.css" rel="stylesheet" />

    <link href="css/page-animation.css" rel="stylesheet" type="text/css" />
    <style>
        #loadingBox {
            position: fixed;
            z-index: 99;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            background-color: #313E4F;
        }

        #loading {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 50px;
            width: 50px;
            margin: -25px 0 0 -25px;
            -webkit-border-radius: 60px;
            border-radius: 60px;
            border: 4px solid #FFF86B;
            border-right-color: #eee;
            border-bottom: 4px solid #eee;
            -webkit-animation: rotate360 1s infinite linear;
            animation: rotate360 1s infinite linear;
        }

        #loadingTips {
            position: relative;
            text-align: center;
            color: #FAE477;
            top: 60%;
            text-indent: .5em;
            font-size: 20px;
        }


        .fullpage {
            height: 100%;
            width: 100%;
            /*background-image: url(images/shake_background.png);
            background-size: 100%;*/
        }

        .money {
            position: absolute;
            bottom: 15%;
            left: 50%;
            margin-left: -95px;
            -webkit-animation: bounceInDown 2.5s ease-out 0s both;
            animation: bounceInDown 2.5s ease-out 0s both;
        }

        .item-hidden {
            display: none;
        }

        .gift {
            width: 170px;
            height: 210px;
            /*background: url(images/gift.png) no-repeat;*/
            animation: hand_move infinite 2s;
            -webkit-animation: hand_move infinite 2s;
        }

        .div-gift {
            height: 100%;
            width: 100%;
            background: url("images/back.jpg") no-repeat scroll 0 0 / 100% auto #ff6543;
            padding-top: 45.6%;
            position: relative;
            font-size: 1rem;
            font-family: "微软雅黑", arial, "宋体", sans-serif;
            -webkit-animation: bounceInDown 1.5s ease-out 0s both;
            animation: bounceInDown 1.5s ease-out 0s both;
        }

        .shake-back {
            position: fixed;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 10;
        }

        .media, .media-body {
            overflow: hidden;
            zoom: 1;
        }

        .media-body {
            width: 100%;
            font-size: 13px;
            text-align: left;
        }

        .media-body, .media-left, .media-right {
            display: table-cell;
            vertical-align: top;
        }

        .media-left, .media > .pull-left {
            padding-right: 10px;
        }

        .media-object {
            display: block;
        }

        .media-heading {
            margin-top: 0;
            margin-bottom: 5px;
        }

        .div-info {
            z-index: 40;
            position: relative;
            top: 75%;
        }
    </style>
</head>
<body>

    <!--loading-->
    <div id="loadingBox" style="display:block">
        <div id="loading"></div>
        <div id="loadingTips">0%</div>
    </div>

    <div id="div_content" style="height: 100%;width:100%; display:none">
        <div class="fullpage" data-bind="visible:$root.coupon()==null&&$root.couponStatus()!='nostart'&&$root.couponStatus()!='end'"
             style="background-color:#313E4F">
            <img src="images/shake_background.png" class="shake-back" />

            <div class="hand" data-bind="visible:$root.stage()=='hand'"></div>

            <div class="money" data-bind="visible:$root.stage()=='money'" style="display: none">
                <div class="gift " data-bind="click:$root.getRandomCoupon">

                </div>
            </div>

            <div class="div-info">
                <!--<div class="boxcontent boxwhite">
                    <div class="box">
                        <div class="title-red"><span>奖项设置：</span></div>
                        <div class="Detail" data-bind="foreach:itemList">
                            <p data-bind="text:jxName+':'+jpName+ '  数量：' +jpNum"></p>
                        </div>
                    </div>
                </div>-->
                <div class="boxcontent boxwhite" data-bind="with:info">
                    <div class="box">
                        <div class="title-red">活动说明：</div>
                        <div class="Detail">
                            <p class="red">
                                本次活动每天可以摇
                                <!-- ko text:dayMaxTimes --><!-- /ko-->
                                次,总共可以摇
                                <!-- ko text:personMaxTimes --><!-- /ko-->
                                次 你已经摇了 <span id="zhuantimes" data-bind="text:hasCjTimes">

                                </span> 次
                            </p>
                            <p data-bind="html:brief">

                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="botton main-center top-zIndex" id="botton" data-bind="click:$root.afterShake">马上领取</div>-->
            <AUDIO id="musicBox" src="audios/shake.wav" preload="metadata"></AUDIO>
            <AUDIO id="endMp3" src="audios/end.mp3" preload="metadata"></AUDIO>
        </div>
        <div class="div-nostart" data-bind="visible:$root.couponStatus()=='nostart',style:{'background-image':$root.info()?$root.info().beginPic:''}" style="display:none"></div>
        <div class="div-expired" data-bind="visible:$root.couponStatus()=='end',style:{'background-image':$root.info()?$root.info().endPic:''}" style="display:none"></div>
        <div class="div-gift" data-bind="visible:coupon" style="display:none">
            <div class="main">
                <div class="redEnvelope">
                    <div class="normalPart">
                        <div class="moneyWrapper" data-bind="with:coupon">
                            <p data-bind="text: jxname"></p>
                            <span id="money">
                                <!--<span>￥</span>-->
                                <!-- ko text:jpname --><!-- /ko-->
                            </span>

                        </div>

                        <form>
                            <!--<div id="hasPhone" style="display: none;">-->
                            <!--<span id="phoneNum">18311300760</span>-->
                            <!--<a class="change" href="javascript:;">修改</a>-->
                            <!--</div>-->
                            <!--<input id="phoneText" name="phone" type="text" placeholder="输入手机号，赢取大礼">-->
                            <div class="media">
                                <div class="media-left" data-bind="with:user">

                                    <img class="media-object"
                                         data-bind="attr:{'src':headimgurl}" style="width: 64px; height: 64px;">


                                </div>
                                <div class="media-body">
                                    <h5 class="media-heading">
                                        <!-- ko text:user()?user().nickname:'' --><!--/ko-->
                                        <small class="text-time" data-bind="  text:coupon()? coupon().getTime:''"></small>
                                    </h5>
                                    <span style="display:none" data-bind="visible:couponStatus()=='success'">恭喜您获得 <!-- ko text:coupon()?coupon().jpname:'' --><!--/ko-->。</span>
                                    <span data-bind="visible:couponStatus()!='success',text:$root.message()">
                                        感谢您参与本次活动。
                                    </span>
                                </div>
                            </div>
                            <div style="margin-top: 10px;">
                                <input id="receiveBtn" type="button" value="已参与" disabled="disabled"
                                       data-bind="click:receiveCoupon,value:$root.status()">

                            </div>
                        </form>
                    </div>


                </div>
                <p class="ruleLinkWrapper item-hidden"><a id="ruleLink" href="javascript:;">活动详情&gt;</a></p>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

    <script src="../../scripts/jquery/jquery-2.1.0.min.js"></script>
    <script src="../../scripts/jquery/jquery.url.js"></script>
    <script src="../../scripts/mobilePhoneShake.min.js"></script>
    <script src="../../scripts/pre-loader.js"></script>
    <script src="../../scripts/knockout/knockout-3.3.0.js"></script>
    <!--<script src="../../scripts/oAuth2.js"></script>-->
    <script src="js/shakeLuckyMoney-vm.js?v=1.1"></script>
    <script>
        function getBaseUrl() {
            var re = new RegExp(/^.*\//);
            return re.exec(window.location.href);
        }

        var access_code = $.url.param("code") ? $.url.param("code") : '';
        var aid = $.url.param("aid");
        var wid = $.url.param("wid");
        var baseurl = getBaseUrl();
       // $("body").html(access_code);
        //alert(access_code);
        var imagesArray = [baseurl + 'images/shake_background.png',
            baseurl + 'images/hand.png',
            baseurl + 'images/back.jpg',
            baseurl + 'images/coupon.jpg',
            baseurl + 'images/活动结束.png'
        ];

        new preLoader(imagesArray, {
            onProgress: function (src, element, index) {

                var percent = Math.floor((100 / this.queue.length) * this.completed.length);

                // update the progress element
                $("#loadingTips").text(percent + '%');


            },
            onComplete: function (loaded, errors) {
                $("#div_content").show();
                $('#loadingBox').hide();
                var $domParm = {
                    $musicBox: $('#musicBox'),
                    $endMp3: $('#endMp3'),
                    $hand: $('.hand'),
                    $money: $('.money'),
                    $receiveBtn: $('#receiveBtn')
                };
                var param = {
                    access_code: access_code,
                    aid: aid,
                    wid: wid
                    //,
                    //onAfterLoadData:function(){
                    //    $("#div_content").show();
                    //    $('#loadingBox').hide();
                    // }
                };
                var luckyMoneyVM = new LuckyMoneyViewModel($domParm, param);

                ko.applyBindings(luckyMoneyVM);



            }
        });


    </script>

</body>
</html>